<template>
  <div class="app-container editcss">
    <div class="dheight">
      <div class="titleHeight">
        <el-row>
          <el-col>
            <el-button type="primary" class="mb15" size="small" icon="el-icon-plus" v-repeatStop="{ func: add, delay: '2000' }" style="float: left;margin-right: 10px;">
              新增
            </el-button>
            <screenSelect title="企业名称" type='input' v-model="queryFrom.name" :isValue='queryFrom.name' placeholder="请输入"
              @transfer="valueHeld($event, 'name')" class=" mb15" width="200px" style="float: left;" />
            
            <el-button type="primary" class="mb15" size="small" icon="el-icon-search" v-repeatStop="{ func: search, delay: '2000' }">
              搜索
            </el-button>
            <el-button type="primary" class="mb15" size="small" icon="el-icon-refresh-left" v-repeatStop="{ func: reset, delay: '2000' }">
              重置
            </el-button>
            <!-- <el-col :span="5">
                <screenSelect title="账号" type='input' v-model="queryFrom.account" :isValue='queryFrom.account'
                  placeholder="请输入" @transfer="valueHeld($event, 'account')" class=" mb15" />
              </el-col> -->
            <!-- <el-col :span="5">
                <screenSelect title="工号" type='input' v-model="queryFrom.name" :isValue='queryFrom.name'
                  placeholder="请输入" @transfer="valueHeld($event, 'name')" class=" mb15" />
              </el-col> -->
            <!-- <el-col :span="5">
                <screenSelect title="角色" type='select' v-model="queryFrom.role" :isValue='queryFrom.role'
                  placeholder="请选择" @transfer="valueHeld($event, 'role')" :options="roleoptions" class=" mb15" />
              </el-col> -->
            <!-- <el-col :span="6">
                <screenSelect title="所属企业" type='select' v-model="queryFrom.powerstationname" :isValue='queryFrom.powerstationname'
                  placeholder="请选择" @transfer="valueHeld($event, 'powerstationname')" :options="powerstationoptions"
                  class=" mb15" />
              </el-col> -->

          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" border style="width: 100%" :height="endHeight" v-loading="loading"
        element-loading-text="Loading..." element-loading-spinner="el-icon-loading">
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column label="企业名称" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="账号" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.account }}
          </template>
        </el-table-column>
        <el-table-column label="角色" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.role_name }}
          </template>
        </el-table-column>
        <el-table-column label="联系电话" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>
        <el-table-column label="到期时间" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.exp_date }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="operation_box">
              <el-button @click.native.prevent="editRow(scope.row)" type="text" class="operation_edit" size="mini">
                编辑
              </el-button>
              <el-button @click.native.prevent="allocation(scope.row)" type="text" class="operation_view" size="mini">
                {{ scope.row.status == 1 ? '禁用' : '启用' }}
              </el-button>
              <!-- <el-button @click.native.prevent="deleteRow(scope.row)" type="text" class="operation_delete" size="mini">
                删除
              </el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationblock" v-if="tableData.length > 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageData.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.limit" :background="true"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <addaccountuser v-if="dialogFormVisible" :optionVal="addfrom" :roleoptions="roleoptions"
        :dialogFormVisible.sync="dialogFormVisible" @cancelHeld="cancel" @updata="save">
      </addaccountuser>
      <systemallocation v-if="dialogAllocationVisible" :optionVal="addfrom"
        :dialogAllocationVisible.sync="dialogAllocationVisible" @cancelHeld="Allocationcancel" @updata="Allocationsave">
      </systemallocation>

    </div>
  </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
import { getRoleList, getRoleAdd, getRoleUpdate, getRoleDelete } from '@/api/staff.js'
import { userList, addto, update, forbidden, getrole } from '@/api/user.js'

import addaccountuser from './components/addaccountuser.vue'
import systemallocation from './components/systemallocation.vue'
import { getRoleMenu, getRoleMenuPost } from '@/api/staff.js'
export default {
  name: 'WorkspaceJsonAccountuser',
  components: {
    screenSelect,
    addaccountuser,
    systemallocation
  },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      dialogAllocationVisible: false,
      isDerive: false,
      isDeriveout: false,
      queryFrom: {},
      endHeight: 0,
      pageData: {
        page: 1,
        limit: 10
      },
      total: 0,
      tableData: [],
      addfrom: {},
      roleoptions: []
    };
  },

  mounted() {
    this.fetTableHeight()
    this.getList()
    this.getroleList()
  },

  methods: {
    getroleList() {
      getrole().then(res => {
        if (res.code == 200) {
          console.log(res.data);
          res.data.map(item => {
            item.label = item.name
            item.value = item.id
          })
          this.roleoptions = res.data
        }
      })
    },
    getList(data) {
      let that = this
      if (data) {
        userList(data).then(res => {
          if (res.code == 200) {
            that.loading = false
            that.total = res.data.count
            that.tableData = res.data.rows
          }
        })
      } else {
        userList(that.pageData).then(res => {
          if (res.code == 200) {
            that.loading = false
            that.total = res.data.count
            that.tableData = res.data.rows
          }
        })
      }
    },
    save(e) {
      let that = this
      that.addfrom = e.form
      if (e.form.id) {
        update(that.addfrom).then(res => {
          if (res.code == 200) {
            that.dialogFormVisible = e.dialogFormVisible
            that.$modal.msgSuccess(res.message)
            that.getList()
          } else {
            that.$modal.msgError(res.message)
          }
        })
      } else {
        addto(that.addfrom).then(res => {
          if (res.code == 200) {
            that.dialogFormVisible = e.dialogFormVisible
            that.$modal.msgSuccess(res.message)
            that.getList()
          } else {
            that.$modal.msgError(res.message)
          }
        })
      }
    },
    Allocationsave(e) {
      let that = this
      that.addfrom = e.form
      getRoleMenuPost(that.addfrom).then(res => {
        if (res.code == 200) {
          that.$modal.msgSuccess(res.message)
          that.dialogAllocationVisible = e.dialogAllocationVisible
        }
      })
    },
    Allocationcancel(e) {
      this.dialogAllocationVisible = e.dialogAllocationVisible
      this.addfrom = e.form
    },
    cancel(e) {
      this.dialogFormVisible = e.dialogFormVisible
      this.addfrom = e.form
    },
    add() {
      this.addfrom = {}
      this.dialogFormVisible = true
    },
    //禁用
    allocation(row) {
      let that = this
      let data = {}
      data.id = row.id
      that.$confirm('此操作将' + (row.status == 0 ? '启用' : '禁用') + row.name + ', 账号是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: false,
      }).then(() => {
        forbidden(data).then(res => {
          if (res.code == 200) {
            that.$modal.msgSuccess(res.message)
            that.getList()
          } else {
            that.$modal.msgError(res.message)
          }
        })

      }).catch(() => {
        this.$modal.msg('已取消')
      });
    },
    editRow(row) {
      this.addfrom = JSON.parse(JSON.stringify(row))
      console.log(this.addfrom);
      this.dialogFormVisible = true
    },
    deleteRow(row) {
      let that = this
      that.$confirm('此操作将永久删除' + row.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: false,
      }).then(() => {
        getRoleDelete(row).then(res => {
          if (res.code == 200) {
            that.$modal.msgSuccess(res.message)
            that.getList()
          } else {
            that.$modal.msgError(res.message)
          }
        })

      }).catch(() => {
        that.$modal.msg('已取消删除')
      });
    },
    search() {
      this.pageData = {
        page: 1,
        limit: 10
      }
      this.loading = true
      let data = this.mergeObjects(this.pageData, this.queryFrom)
      this.getList(data)
    },
    reset() {
      this.queryFrom = {
      }
    },
    mergeObjects(obj1, obj2) {
      return Object.assign({}, obj1, obj2);
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.endHeight = 0
        resolve()
      })
    },
    fetTableHeight() {
      this.resetHeight().then(res => {
        let fHeight = (window.getComputedStyle(document.querySelector('.editcss')).height).replace('px', "")
        let zHeight = (window.getComputedStyle(document.querySelector('.titleHeight')).height).replace('px', "")
        this.endHeight = (fHeight - zHeight - 92)
      })
    },
    handleSizeChange(val) {
      this.pageData.limit = val
    },
    handleCurrentChange(val) {
      this.pageData.page = val
    },
    valueHeld(childParam, fatherparam) {
      this.queryFrom[fatherparam] = childParam
    },
  },
};
</script>

<style lang="scss" scoped>
.dheight {
  // box-shadow: 0 0 10px #BBBBBB;
  border-radius: 6px;
  // padding: 20px;
  height: calc(100%);
  position: relative;
}

::v-deep .el-button.ch_button {
  padding: 7px 9px;
}

::v-deep .el-button.ch_button span {
  display: flex;
  align-items: center;

  i {
    font-size: 16px;
  }

  div {
    font-size: 13px;
    font-weight: 400;
    margin-left: 4px;
  }
}
</style>